<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<meta name="description" content="博客园">
	<meta name="keywords" content="博客园">
	<link rel="shortcut icon" href="./favicon.ico" />
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			background-color: #f2f0ed;
		    color: rgb(51, 51, 51);
		    -webkit-font-smoothing: antialiased;
		    font: 14px/1.5 "Hiragino Sans GB", "Hiragino Sans GB W3", 微软雅黑;
		}
		.container{
			width: 100%;
			height: 100%;
			background: url(images/sign_bg.jpg) center no-repeat;
			background-size: cover;
			overflow: hidden;
		}
		.content{
			width: 400px;
			margin: 200px auto 0;
		    padding: 50px 50px 30px;
		    background-color: #fff;
		    border-radius: 5px;
		    box-shadow: 0 0 8px rgba(0,0,0,.2);
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		}
		.navbar{
			display: flex;
			justify-content: center;
		}
		.bar{
			width: 55px;
		    color: #969696;
		    font-size: 18px;
		    font-weight: 400;
		    text-align: center;
		    line-height: 38px;
		    cursor: pointer;
		}
		.bar:nth-child(1){
			margin-right: 5px;
		}
		.bar:hover{
			border-bottom: 2px solid #ea6f5a;
		}
		.bar_active{
			border-bottom: 2px solid #ea6f5a;
			color: #ea6f5a;
			font-weight: 700;
		}
		.option{
			padding: 20px 0;
			display: none;
		}
		.opt_active{
			display: block;
		}
		.input-wrap{
			display: flex;
			width: 300px;
			height: 50px;
			margin: auto;
			border: 1px solid #ccc;
			background: #f8f8f8;
		}
		.input-wrap:nth-child(1){
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			border-bottom: none;
		}
		.opt_register .input-wrap:nth-child(2){
			border-bottom: none;
		}
		.opt_login .input-wrap:nth-child(2),
		.opt_register .input-wrap:nth-child(3){
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
		}
		.input-wrap span{
			width: 50px;
			height: 50px;
			line-height: 50px;
    		text-align: center;
    		font-size: 20px;
    		color: #969696;
		}
		.input-wrap input{
			flex: 1;
			border: none;
			outline: none;
			background: none;
		}
		.login-tip{
			display: block;
			text-align: right;
			line-height: 40px;
			text-decoration: none;
			color: #929292;
			font-size: 12px;
		}
		.register-tip{
			display: block;
			line-height: 40px;
			text-decoration: none;
			color: #929292;
			font-size: 12px;
		}
		.login-btn{
		    margin-top: 20px;
		    width: 100%;
		    padding: 9px 18px;
		    font-size: 18px;
		    border: none;
		    border-radius: 25px;
		    color: #fff;
		    background: #42c02e;
		    cursor: pointer;
		    outline: none;
		    display: block;
		}
		.register-btn{
		    margin-top: 20px;
		    width: 100%;
		    padding: 9px 18px;
		    font-size: 18px;
		    border: none;
		    border-radius: 25px;
		    color: #fff;
		    background: #42c02e;
		    cursor: pointer;
		    outline: none;
		    display: block;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="content">
			<div class="navbar">
				<div class="bar bar_login">登录</div>
				<div class="bar bar_register bar">注册</div>
			</div>
			<div class="select">
				<div class="option opt_login ">
					<form action="" accept-charset="UTF-8" method="post">
						<div class="input-wrap">
							<span><i class="fa fa-user" aria-hidden="true"></i></span>
							<input type="text" placeholder="请输入账号">
						</div>
						<div class="input-wrap">
							<span><i class="fa fa-unlock-alt" aria-hidden="true"></i></span>
							<input type="password" placeholder="请输入密码" >
						</div>
						<a href="javascript:;" class="login-tip">忘记密码？</a>
						<button class="login-btn">登录</button>
					</form>
				</div>
				<div class="option opt_register opt_active">
					<form action="" accept-charset="UTF-8" method="post">
						<div class="input-wrap">
							<span><i class="fa fa-user" aria-hidden="true"></i></span>
							<input type="text" placeholder="请输入账号">
						</div>
						<div class="input-wrap">
							<span><i class="fa fa-unlock-alt" aria-hidden="true"></i></span>
							<input type="password" placeholder="请输入密码">
						</div>
						<div class="input-wrap">
							<span><i class="fa fa-unlock-alt" aria-hidden="true"></i></span>
							<input type="password" placeholder="请确认密码">
						</div>
						<a href="javascript:;" class="register-tip">点击“注册”即表示您同意并愿意遵守用户协议</a>
						<button class="register-btn">注册</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script>
		$(function(){
	        function getQueryString(name) {
	            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
	            var r = window.location.search.substr(1).match(reg);
	            if (r != null) {
	                return unescape(r[2]);
	            }
	            return null;
	        }

			var changeStatus={
				jump:function(status){
					this.init(status);
					this.event();
				},
				init:function(status){
					status?status=status:status="register";
					$(".option").removeClass("opt_active");
					$(".bar").removeClass("bar_active");
					if(status=="register"){
						$(".opt_register").addClass("opt_active");
						$(".bar_register").addClass("bar_active");
					}else if(status=="login"){
						$(".opt_login").addClass("opt_active");
						$(".bar_login").addClass("bar_active");
					}else{
						$(".opt_register").addClass("opt_active");
						$(".bar_register").addClass("bar_active");
					}
				},
				event:function(){
					var that = this;
					$(".bar").on("click",function(){
						if($(this).hasClass("bar_active")){
							return
						}else{
							var status = $(this).text();
							if(status=="登录"){
								// that.init("login");
								window.location.href="sign.html?status=login";
							}else if(status=="注册"){
								// that.init("register");
								window.location.href="sign.html?status=register";
							}
						}
					})
				}
			}
			//获取登录/注册状态
			var status = getQueryString("status");
			//切换登录注册状态
			changeStatus.jump(status);

		})

	</script>

</body>
</html>